<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
	$(function(){
		$('li').mouseover(function(event) {
			$(this).stop(true,false).animate({width:'538px'}, 500);
			$(this).siblings().stop(true,false).animate({width:'100px'}, 500);
		});


	})

	</script>
	<style type="text/css">
	*{
		padding: 0px;
		margin:0px;
	}
	li{
		list-style: none;
		width: 100px;
		height: 405px;
		float: left;
		overflow: hidden;
	}
	ul{
		width: 950px;
		height: 405px;
		margin:40px auto;
	}
	.other{
		width: 538px;
		height: 405px;
	}
/*	img{
		float: left;
	}*/


	</style>
	<title>手风情</title>
</head>
<body>
	<ul>
		<li><img src="./1.jpg" alt=""></li>
		<li><img src="./2.jpg" alt=""></li>
		<li><img src="./3.jpg" alt=""></li>
		<li><img src="./4.jpg" alt=""></li>
		<li class="other"><img src="./5.jpg" alt=""></li>
	</ul>
</body>
</html>